<template>
  <div>
    <div>计划值守打卡</div>
    <div ref="target" style="width: 100%; height: 100%;"></div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const target = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(target.value)
  renderChart()
})

const renderChart = () => {
  const options = {
    // 图例配置
    legend: [{
      show: true,
      // 图例色块
      icon: 'circle',
      // 位置
      top: '50%',
      left: '40%',
      // 展示数据
      data: [{
        name: '已完成',
        icon: 'circle',
        value: 21
      }, {
        name: '总打卡',
        icon: 'circle',
        value: 27
      }],
      // 总宽度（一列）
      width: -5,
      // 每个色块的宽
      itemWidth: 15,
      // 每个色块的高度
      itemHeight: 10,
      // item 间距
      itemGap: 23,
    },
    {
      show: true,
      icon: 'none',
      // 位置
      top: '47%',
      left: '46%',
      // 展示数据
      formatter: function (name) {  //图例后添加数值
        let data = options.legend[0].data;
        let tarValue;
        for (let i = 0; i < data.length; i++) {
          if (data[i].name === name) {
            tarValue = data[i].value;
          }
        }
        return tarValue;
      },
      textStyle: {
        fontWeight: 'bold',
        fontSize: 25,
      },
      // 总宽度（一列）
      width: -5,
      // 每个色块的宽
      itemWidth: 30,
      // 每个色块的高度
      itemHeight: 10,
      // item 间距
      itemGap: 5,
    }
    ],
    // // 提示层
    tooltip: {
      show: true,
      trigger: 'item',
      formatter: '{b} : {c}'
    },
    // Y 轴展示选项
    yAxis: {
      type: 'value',
      // 不展示轴线
      axisLine: {
        show: false
      },
      // 不展示刻度
      axisTick: {
        show: false // 取消 Y 轴刻度
      },
    },
    // X 轴展示数据
    xAxis: {
      // 数据展示
      type: 'value',
      // 不显示轴
      show: false,
    },
    series: [{
      name: '进度',
      // 使用饼图绘制，减少饼图宽度即为环形图
      type: 'pie',
      // 不展示鼠标移入动画
      hoverAnimation: false,
      // 半径位置，需要依次递减，否则会重复在一处进行展示
      radius: [82, 100],
      // 中心点
      center: ['50%', '55%'],
      // 不展示 label
      label: { show: false },
      startAngle: 180,
      endAngle: 360,
      symbol: 'circle',
      // 数据配置
      data: [
        // 设置数据与名称
        {
          value: 21, name: '已完成',
          itemStyle: {
            borderRadius: '50%',  // 圆角
          }
        },
        // 最大数据，展示比例
        {
          value: 27 - 21,
          name: '未完成',
          itemStyle: { color: 'rgba(0,0,0,0)' },
        }
      ]
    },
    {
      name: '总数',
      type: 'pie',
      // 图形不响应事件
      silent: true,
      // z-index: 置于底层
      z: 1,
      // 半径位置，需要依次递减，否则会重复在一处进行展示
      radius: [82, 100],
      // 中心点
      center: ['50%', '55%'],
      // 不展示 label
      label: { show: false },
      startAngle: 180,
      endAngle: 360,
      // 数据
      data: [
        // 绘制底线
        {
          value: 27,
          name: '总打卡',
          itemStyle: { color: '#f0f3f6', borderRadius: '50%', opacity: 0.5 },
        },
      ]

    }
    ]
  }

  mChart.setOption(options)
}

</script>

<style lang="scss" scoped></style>
